<template>

</template>

<script>
import * as THREE from "three";
import * as d3 from 'd3';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import chinaJson from "../../assets/china.json"
import {onMounted, ref} from 'vue'

/**
 * 创建场景对象Scene
 */
var scene = new THREE.Scene();
// 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
let axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);
/**
 * 创建网格模型
 */
// var sphereGeometry = new THREE.SphereGeometry(30, 20, 20); //创建一个球体几何对象
// var boxGeometry = new THREE.BoxGeometry(100, 20, 20); //创建一个立方体几何对象Geometry
// var material = new THREE.MeshLambertMaterial({
//   color: 0x0000ff
// }); //材质对象Material
// var mesh1 = new THREE.Mesh(sphereGeometry, material); //网格模型对象Mesh
// mesh1.name='Sphere'
// var mesh2 = new THREE.Mesh(boxGeometry, material); //网格模型对象Mesh
// mesh2.name='Box'
// mesh2.position.set(100,0,0)
// let meshGroup = new THREE.Group();

let geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
let R = 1; //圆弧半径
let N = 50; //分段数量
// 批量生成圆弧上的顶点数据
for (let i = 0; i < N; i++) {
  let angle = 2 * Math.PI / N * i;
  let x1 = R * Math.sin(angle);
  let y1 = R * Math.cos(angle);
  geometry.vertices.push(new THREE.Vector3(x1, y1, 0));
}
// 插入最后一个点，line渲染模式下，产生闭合效果
geometry.vertices.push(geometry.vertices[0])
//材质对象
let materialC = new THREE.LineBasicMaterial({
  color: '#2cfd3f'
});
//线条模型对象
let line = new THREE.Line(geometry, materialC);
line.name = 'CityLine';
let meshGroup = new THREE.Group();
meshGroup.add(line)
scene.add(meshGroup); //网格模型添加到场景中
/**
 * 光源设置
 */
    //点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
/**
 * 相机设置
 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
 * 创建渲染器对象
 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象



/**
 * 编辑group子对象网格模型mesh1和mesh2的帧动画数据
 */
// 创建名为Box对象的关键帧数据
// var times = [0, 10]; //关键帧时间数组，离散的时间点序列
// var values = [0, 0, 0, 150, 0, 0]; //与时间点对应的值组成的数组
// // 创建位置关键帧对象：0时刻对应位置0, 0, 0   10时刻对应位置150, 0, 0
// var posTrack = new THREE.KeyframeTrack('CityLine.position', times, values);
// 创建颜色关键帧对象：10时刻对应颜色1, 0, 0   20时刻对应颜色0, 0, 1
var colorKF = new THREE.KeyframeTrack('CityLine.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);
// 创建名为Sphere对象的关键帧数据  从0~20时间段，尺寸scale缩放3倍
var scaleTrack = new THREE.KeyframeTrack('CityLine.scale', [0, 20], [1, 1, 1, 13, 13, 13]);

// duration决定了默认的播放时间，一般取所有帧动画的最大时间
// duration偏小，帧动画数据无法播放完，偏大，播放完帧动画会继续空播放
var duration = 20;
// 多个帧动画作为元素创建一个剪辑clip对象，命名"default"，持续时间20
var clip = new THREE.AnimationClip("default", duration, [ colorKF, scaleTrack]);

/**
 * 播放编辑好的关键帧数据
 */
// group作为混合器的参数，可以播放group中所有子对象的帧动画
var mixer = new THREE.AnimationMixer(meshGroup);
// 剪辑clip作为参数，通过混合器clipAction方法返回一个操作对象AnimationAction
var AnimationAction = mixer.clipAction(clip);
//通过操作Action设置播放方式
AnimationAction.timeScale = 20;//默认1，可以调节播放速度
// AnimationAction.loop = THREE.LoopOnce; //不循环播放
AnimationAction.play();//开始播放


// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧

  //clock.getDelta()方法获得两帧的时间间隔
  // 更新混合器相关的时间
  mixer.update(clock.getDelta());
}
render();
</script>
<style scoped>
</style>